<template>
  <div class="markdown-wrap">
    <div class="message-avatar">
      <el-avatar :size="50" fit="cover" src="/avatar.png" />
    </div>
    <div class="message-editor">
      <el-form
        ref="messageForm"
        :model="messageForm"
        :rules="rules"
        :inline="true"
        size="large"
      >
        <div class="message-author">
          <el-form-item prop="nickname">
            <el-input
              v-model="messageForm.nickname"
              clearable
              placeholder="昵称 xxx"
            />
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              v-model="messageForm.email"
              clearable
              placeholder="邮箱 xxx@xxx.xxx"
            />
          </el-form-item>
          <el-form-item prop="url">
            <el-input
              v-model="messageForm.url"
              clearable
              placeholder="网址 [http(s)://]www.xxx.xxx"
            />
          </el-form-item>
        </div>
        <div class="message-content">
          <el-form-item prop="content">
            <mavonEditor
              v-model="messageForm.content"
              codeStyle="agate"
              :toolbars="toolbars"
              :toolbarsFlag="isShowToolbars"
              :defaultOpen="showMode"
              :subfield="false"
              :boxShadow="false"
              :shortCut="false"
              :autofocus="false"
              :placeholder="getPlaceholder"
              :style="maxHeight"
              @fullScreen="onFullScreen"
            />
          </el-form-item>
        </div>
      </el-form>
      <div class="message-toolbar">
        <div>
          <div class="message-toolbar-left">
            <el-tooltip content="插入表情" placement="top" :open-delay="500">
              <i
                class="el-icon-third-biaoqing"
                :style="{ color: iconColor.emojiColor }"
                @click="onEmoji"
              />
            </el-tooltip>
            <el-tooltip content="插入图片" placement="top" :open-delay="500">
              <i
                class="el-icon-third-picture-circle"
                :style="{ color: iconColor.pictureColor }"
                @click="onPicture"
              />
            </el-tooltip>
            <el-link
              href="http://www.mdeditor.com/"
              :underline="false"
              target="_blank"
            >
              <el-tooltip content="Markdown" placement="top" :open-delay="500">
                <i class="el-icon-third-markdown-circle is-vertical" />
              </el-tooltip>
            </el-link>
          </div>
        </div>
        <div class="message-toolbar-right">
          <el-tooltip content="预览" placement="top" :open-delay="500">
            <i
              class="el-icon-third-yulan is-vertical"
              :style="{ color: iconColor.previewColor }"
              @click="onPreview"
            />
          </el-tooltip>
          <el-tooltip placement="top" :open-delay="500">
            <template #content>
              <p>
                <span>简约</span>
                <i class="el-icon-third-qiehuan is-vertical" />
                <span>快捷</span>
              </p>
            </template>
            <i
              class="el-icon-third-qiehuan is-vertical"
              :style="{ color: iconColor.cutoverColor }"
              @click="onCutover"
            />
          </el-tooltip>
          <el-button type="primary" size="mini" @click="onSubmit">
            提交
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Format from "$js/validate";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import toolbars from "./config/mdConfig";
export default {
  name: "Markdown",
  components: {
    mavonEditor,
  },
  props: {
    username: String,
  },
  data() {
    return {
      messageForm: {
        nickname: "",
        email: "",
        url: "",
        content: "",
      },
      rules: {
        nickname: [
          { validator: Format.FormValidate.Form().Name, trigger: "blur" },
        ],
        email: [
          { validator: Format.FormValidate.Form().Email, trigger: "blur" },
        ],
        url: [{ validator: Format.FormValidate.Form().URL, trigger: "blur" }],
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: "blur",
          },
        ],
      },
      showMode: "edit",
      toolbars: toolbars,
      isShowToolbars: false,
      maxHeight: { "max-height": "1.89rem !important" },
      color: "var(--colorLevel1)",
      iconColor: {
        emojiColor: "",
        pictureColor: "",
        previewColor: "",
        cutoverColor: "",
      },
    };
  },
  computed: {
    getPlaceholder() {
      const defVal = "大侠，留点儿武功秘籍再走吧~~~";
      if (this.username) {
        return "@" + this.username;
      } else {
        return defVal;
      }
    },
  },
  methods: {
    onFullScreen(state) {
      if (state) {
        this.maxHeight["max-height"] = "";
      } else {
        this.maxHeight["max-height"] = "1.89rem !important";
      }
    },
    onEmoji() {
      this.setColor("emojiColor");
    },
    onPicture() {
      this.setColor("pictureColor");
    },
    onPreview() {
      this.isShowToolbars = false;
      if (this.showMode === "edit") {
        this.showMode = "preview";
      } else {
        this.showMode = "edit";
      }
      this.setColor("previewColor");
    },
    onCutover() {
      this.showMode = "edit";
      this.isShowToolbars = !this.isShowToolbars;
      this.setColor("cutoverColor");
    },
    setColor(flag) {
      for (let key in this.iconColor) {
        if (key === flag && this.iconColor[key] === "") {
          this.iconColor[key] = this.color;
        } else {
          this.iconColor[key] = "";
        }
      }
    },
    onSubmit() {
      this.$refs.messageForm.validate((valid) => {
        if (valid) {
          console.log(this.messageForm);
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.markdown-wrap {
  display: flex;
  overflow: hidden;
  border: 0.01rem solid #f0f0f0;
  border-radius: 0.04rem;
  padding: 0.1rem;
  position: relative;
}

.message-avatar {
  width: 8%;
}

.message-editor {
  width: 92%;
}

.el-form, .el-form >>> .el-form-item__content, .message-content >>> * {
  width: 100%;
}

.v-note-wrapper {
  min-height: 1.89rem !important;
}

.el-form-item {
  margin-right: 0;
}

.message-author .el-form-item {
  width: 33.33%;
}

.el-input >>> .el-input__inner {
  border: 0;
  border-radius: 0;
  border-bottom: 0.01rem dashed #dedede;
}

.el-input >>> .el-input__inner {
  padding-left: 0.05rem;
}

.message-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-toolbar-left {
  display: flex;
  align-items: center;
}

.message-toolbar i[class*='el-icon-third-'] {
  color: #8590a6;
  font-size: 0.22rem;
  cursor: pointer;
  outline: none;
  margin-right: 0.1rem;
}

.message-toolbar i[class*='el-icon-third-']:hover {
  color: var(--colorLevel1);
}
</style>